import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:wallpaper/components/images/image_load.dart';
import 'package:wallpaper/model/options_base.dart';
import 'package:wallpaper/providers/setting_provider.dart';
import 'package:wallpaper/tools/route_animation.dart';

class TypesBase {
  final String name;
  final Widget page;
  final String bg;

  TypesBase({
    required this.name,
    required this.page,
    required this.bg,
  });
}

class MyTypes extends StatelessWidget {
  final List<TypesBase> wallpapges;
  final bool vertical;
  final bool isScroll;

  const MyTypes({
    super.key,
    required this.wallpapges,
    required this.vertical,
    this.isScroll = false,
  });

  @override
  Widget build(BuildContext context) {
    final int col = OptionsBase().imageColumns(context);
    final theme = Theme.of(context).colorScheme;
    final SettingProvider setting = Provider.of<SettingProvider>(context);

    return GridView.builder(
      itemCount: wallpapges.length,
      shrinkWrap: true,
      physics: isScroll ? null : NeverScrollableScrollPhysics(),
      padding: EdgeInsets.all(setting.padding),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: vertical ? col + 1 : col,
        childAspectRatio: vertical ? 0.7 : 1.7,
        mainAxisSpacing: setting.padding,
        crossAxisSpacing: setting.padding,
      ),
      itemBuilder: (context, index) {
        return Card(
          elevation: 3,
          margin: EdgeInsets.all(0),
          shadowColor: theme.secondary.withOpacity(0.5),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(setting.radius),
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(setting.radius),
            child: Stack(
              children: [
                // 背景图片
                Positioned.fill(
                  child: ImageLoad(imageUrl: wallpapges[index].bg),
                ),
                // 水波纹和文本
                Positioned.fill(
                  child: Material(
                    color: Colors.transparent,
                    child: InkWell(
                      hoverColor: theme.primary.withOpacity(0.1),
                      focusColor: theme.primary.withOpacity(0.1),
                      highlightColor: theme.primary.withOpacity(0.1),
                      splashColor: theme.primary.withOpacity(0.1),
                      onTap: () {
                        RouteAnimation().animateRoute(
                          context,
                          wallpapges[index].page,
                        );
                      },
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Container(
                            padding: const EdgeInsets.all(3.0),
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(4),
                                topRight: Radius.circular(4),
                              ),
                              gradient: LinearGradient(
                                begin: Alignment.topCenter,
                                end: Alignment.bottomCenter,
                                colors: [
                                  Colors.black.withOpacity(0),
                                  Colors.black.withOpacity(1),
                                ],
                              ),
                            ),
                            width: double.infinity,
                            child: Text(
                              wallpapges[index].name,
                              style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                                overflow: TextOverflow.ellipsis,
                                shadows: [
                                  Shadow(
                                    blurRadius: 3.0,
                                    color: Colors.black.withOpacity(0.5),
                                    offset: Offset(1.0, 1.0),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}
